<template>
  <div v-loading="loading">
    <el-collapse
      v-model="activeName"
      accordion
    >
      <el-collapse-item
        title="检索条件"
        name="检索条件"
      >
        <query-panel
          @loading="handleLoading"
          @success="handleSuccess"
        />
      </el-collapse-item>
      <el-collapse-item
        title="检索结果"
        name="检索结果"
      >
        <result-panel @printing="handlePrinting" />
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      :visible.sync="showPage"
      fullscreen
      destroy-on-close
      append-to-body
      :show-close="false"
    >
      <page-view
        ref="pageView"
        @close="showPage=false"
      />
    </el-dialog>
  </div>
</template>

<script>
  import pageView from "./pageView.vue"
  import queryPanel from "./queryPanel.vue"
  import resultPanel from "./resultPanel.vue"
  export default {
    name: 'recordQuery',
    components: {
      pageView,
      queryPanel,
      resultPanel,
    },
    data() {
      return {
        activeName: "检索条件",
        loading: false,
        showPage: false,
      }
    },
    methods: {
      handleLoading(status) {
        this.loading = status.loading;
      },
      handleSuccess() {
        this.activeName = "检索结果";
      },
      handlePrinting(content) {
        this.showPage = true;
        this.$nextTick(() => {
          this.$refs.pageView.generatePages(content);
        });
      }
    },
  }
</script>